<template>
	<body>
	  <div id="login_box">
	    <h2>LOGIN</h2>
	    <div id="input_box">
	      <input type="text" placeholder="请输入用户名" v-model="username" />
	    </div>
	    <div class="input_box">
	      <input type="password" placeholder="请输入密码" v-model="password" />
	    </div>
	    <button @click="login()">登录</button><br>
	  </div>
	</body>
</template>

<script>
	import Sever from "@/api/selfApi.js";
	import { useStore } from 'vuex';
	import { mapState, mapActions, mapMutations } from 'vuex'
	

	export default {
		 name: "login",
		 components:{
			 Sever
		 },
		data() {
		  return {
			username:"",
			password:"",
			
		  }
		  },
		  methods:{
			  ...mapActions(['setToken']),
			async login(){
				
				 await Sever.smz
				   .login({ username: this.username,password:this.password })
				   .then((res) => {
				     if (res.code == 1) {
						 
						 console.log(res);
				      this.$store.dispatch('setToken',res.msg);
					  this.$router.push({ path: '/ztqk' });
						 } else {
						this.openNotice(res.msg);
				       console.log("接口请求错误！");
				     }
				   })
				   .catch((err) => {
				     console.log(err);
				   });
				 },
			
						 openNotice(msg) {
						        this.$message({
						          showClose: true,
						          message: msg,
						          type: 'error'
						        });
						      }
				
				
			 
		  }
		
		}

</script>
  <style scoped>
	    body {
	      background: url('../../assets/images/login.png') no-repeat;
	      background-size: 100% 130%;
	    }
	
	    #login_box {
	      width: 20%;
	      height: 400px;
	      background-color: #00000060;
	      margin: auto;
	      margin-top: 10%;
	      text-align: center;
	      border-radius: 10px;
	      padding: 50px 50px;
	    }
	
	    h2 {
	      color: #ffffff90;
	      margin-top: 5%;
	    }
	
	    #input-box {
	      margin-top: 5%;
	    }
	
	    span {
	      color: #fff;
	    }
	
	    input {
	      border: 0;
	      width: 60%;
	      font-size: 15px;
	      color: #fff;
	      background: transparent;
	      border-bottom: 2px solid #fff;
	      padding: 5px 10px;
	      outline: none;
	      margin-top: 10px;
	    }
	
	    button {
	      margin-top: 50px;
	      width: 60%;
	      height: 30px;
	      border-radius: 10px;
	      border: 0;
	      color: #fff;
	      text-align: center;
	      line-height: 30px;
	      font-size: 15px;
	      background-image: linear-gradient(to right, #30cfd0, #330867);
	    }
	
	    #sign_up {
	      margin-top: 45%;
	      margin-left: 60%;
	    }
	
	    a {
	      color: #b94648;
	    }
	  </style>